<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div class="table-search">
      <el-form :inline="true" :model="serachItem">
        <el-form-item>
          <el-select v-model="searchType" placeholder="请选择搜索类型">
            <el-option
              v-for="item in searchTypeArry"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-if="searchType == '1'" v-model="serachItem.userName" placeholder="请输入用户名称"></el-input>
          <el-input v-else :maxlength="11" v-model="serachItem.userPhone" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="serachUser">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="addUser">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">用户信息</div>
      <!-- 表格 -->
      <div class="listfile">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :height="tableHeight"
          :data="tableData">
          <el-table-column prop="account" label="账号" width="150"></el-table-column>
          <el-table-column prop="userName" label="用户名" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="userPhone" label="联系方式" width="160"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
          <el-table-column prop="userEmail" label="邮箱" width="160"></el-table-column>
          <el-table-column prop="statusinfo" label="状态" width="90"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" icon="el-icon-star-off" type="warning" size="mini">查看</el-button> -->
              <el-button
                size="mini" type="primary" icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <!-- <el-button
                size="mini"
                type="danger" icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table_page">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>

    </div>

    <!-- 子组件 -->
    <userInfoModal ref="userInfoModal1" @submit="submitAddChange" :title='title_name' :historyData='addEdit_data'></userInfoModal>
  </div>
</template>

<script>
import userInfoModal from "./userInfoModal"
import { searchUserPageSize, searchUserNameInfo } from '@/api/userApi'
  export default {
    components: {userInfoModal},
    data() {
      return {
        tableHeight: 'calc(100vh - 296px)',
        totalCount: 0, //总条数，总共有多少条数据
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示多少条
        addEdit_data: {},
        loading: true,
        searchType: '1',
        searchTypeArry: [
          {
            value: '1',
            label: '用户名称'
          },
          {
            value: '2',
            label: '用户手机'
          }
        ],
        title_name: '',
        tableData: [],
        serachItem: {
          userName: '',
          userPhone: '',
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }
    },
    methods: {
      // 新增--保存后，子传给父组件
      submitAddChange () {
        this.allFindUserInfo(); // 条件查询
      },
      //添加
      addUser(){
        this.$refs.userInfoModal1.modal1 = true;
        this.title_name = '新增用户';
        this.$refs.userInfoModal1.addEdmitFun(); // 父调子组件的方法
      },
      //用户名查询(条件查询接口)
      serachUser() {
        if (this.searchType == "1"){

          this.serachItem.userPhone = undefined;

        } else if(this.searchType == "2") {

          this.serachItem.userName = undefined;
        }

        //回调接口
        searchUserNameInfo(this.serachItem).then((res)=>{
          if (res.statusCode == "200"){
            this.tableData = [];
            console.log("搜索：", res.data)
            this.tableData = res.data.content;
            this.totalCount = res.data.total;
          }
        })
      },
      // 用户分页查询 (查询所有)
      allFindUserInfo(){
        let _data = {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        //回调接口
        searchUserPageSize(_data).then((res)=>{
          console.log("查询所有:", res.data);
          if (res.statusCode == "200"){
            this.loading = false;
            this.tableData = res.data.content;
            this.totalCount = res.data.total;
          }
        })
      },
      //编辑
      handleEdit(index, row) {
        this.addEdit_data = JSON.parse(JSON.stringify(row));
        // console.log("编辑:", index, row, this.addEdit_data);
        this.$refs.userInfoModal1.modal1 = true;
        this.title_name = '编辑用户';
         this.$refs.userInfoModal1.addEdmitFun(); // 父调子组件的方法
      },
      // 分页
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        console.log("2222", newPage);
        this.loadTableData()
      },
      //每页
      handleSizeChange(val) {
        this.pageSize = val
        console.log("1111", val);
        this.loadTableData()
      },

      //封装分页接口
      loadTableData(){
        if (this.serachItem.userName || this.serachItem.userPhone) {
          //调条件查询接口
          this.serachUser();
        } else {
          //调查询所有的接口
          this.allFindUserInfo();
        }

      }
    },
    created(){},
    mounted(){
      console.log("tableHeight:", this.tableHeight)
      this.loadTableData();
    },
    destroyed() {
      this.$destroy();
      this.tableData = [];
      this.page_Data = [];
    }
  }
</script>
